<script setup lang="ts">
import { ref, onMounted } from "vue";
// import { AreaCode } from "@/utils/phone";
import { getWorldAddress } from "@/api/app";
import cache from "@/utils/cache";

type optionsType = {
  text: string;
  value: string;
};
const options = ref<Array<optionsType>>([]);
const SOpthions = ref<optionsType[]>([]);
const range = ref<string>("1");
const rangeShow = ref<boolean>(false);
const ddmRange = ref<any>(null);
const countryList = ref<any[]>([]);

// 当前语言
const lang = cache.getLanguage().value.includes("zh") ? "cn" : "en";

onMounted(async () => {
  const res = await getWorldAddress({ scene: "country" });
  console.log(res.data);
  if (res.code === 0) {
    countryList.value = res.data;
    options.value = countryList.value.map((item) => {
      let translations = JSON.parse(item.translations);
      let phonecode = item.phonecode;
      if (phonecode.includes("+")) {
        phonecode = phonecode.replace("+", "");
      }

      return {
        text: "+" + phonecode + " " + translations[lang],
        value: phonecode,
      };
    });
  }

  // options.value = AreaCode.map((item) => {
  //   return { text: "+" + item.tel + " " + item.name, value: item.tel };
  // });
  SOpthions.value = options.value;
});
const filterTap = () => {
  //显示下拉框
  ddmRange.value.show();
  rangeShow.value = true;
};
const emits = defineEmits(["change"]);
const rangeItemClick = (e: optionsType) => {
  range.value = e.value;
  emits("change", Number(range.value));
  rangeClose();
};
const rangeClose = () => {
  rangeShow.value = false;
};

const rangeInput = (val: string) => {
  SOpthions.value = options.value.filter((item) => {
    // 判断输入框的值是否包含在选项中
    return item.value.includes(val);
  });
};

</script>

<template>
  <fui-dropdown-menu
    :size="28"
    selectedColor="#465CFF"
    :isCheckbox="false"
    :options="SOpthions"
    @click="rangeItemClick"
    @close="rangeClose"
    ref="ddmRange"
  >
    <view class="fui-filter__item" @tap="filterTap">
      <text>+</text>
      <fui-input
        backgroundColor=""
        style="width: 40px"
        v-model="range"
        @input="rangeInput"
        size="28"
      ></fui-input>
      <view class="fui-filter__icon" :class="{ 'fui-icon__ani': rangeShow }">
        <image
          style="width: 12px"
          mode="widthFix"
          src="@/static/select.png"
        ></image>
      </view>
    </view>
  </fui-dropdown-menu>
</template>

<style lang="scss" scoped>
.fui-dropdown__menu {
  width: auto;
  flex: none;
  border-right: 1px solid #d8d8d8;
  margin-right: 10px;
  padding-right: 10px;
}

.fui-filter__item {
  font-size: 14px;
  font-weight: normal;
  line-height: 22px;
  display: flex;
  align-items: center;
  letter-spacing: 0px;

  /* 主色系 */
  color: $subject-color;

  ::v-deep .fui-input__wrap {
    padding: 0 !important;

    .fui-input__self {
      padding: 0;
    }
  }
}

.fui-filter__icon {
  transition: all 0.15s linear;
  margin-left: 10px;
}

.fui-icon__ani {
  transform: rotate(180deg);
}

::v-deep .fui-dropdown__menu-list {
  width: 200px;

  .fui-dropdown__menu-item {
    padding: 5px !important;
  }
}
</style>
